<script setup lang="ts">
import { onMounted, ref, onUnmounted } from 'vue';
import {
 BIconDeviceHdd
} from "bootstrap-icons-vue";

const parser = new DOMParser();
interface Disk {
    path: string
    iotype: string
    size?: number
    from: string
}

const xml = defineModel<string>()
const disk = ref<Disk>({
    path: "",
    iotype: "STAT",
    from: ""
})


const cdromParse = ()=>{
    /**参数解析*/
    if(xml.value != null){
        const doc = parser.parseFromString(xml.value, "text/xml");
        let file = doc.getElementsByTagName("source")[0].getAttribute("file")
        disk.value.path = file == null ? "" : file;
    }
}

const mouseleave = ()=>{
    if(xml.value != null){
        const doc = parser.parseFromString(xml.value, "text/xml");
        doc.getElementsByTagName("source")[0].setAttribute("file", disk.value.path);
        xml.value = new XMLSerializer().serializeToString(doc);
    }
}

const ioTypes = ["STAT","SCSI" ,"USB"]
onMounted(()=>{
    cdromParse()
})

onUnmounted(()=>{
    mouseleave();
})
</script>

<template>
    <div @mouseleave="mouseleave" style="padding: 12px 2px;box-shadow: var(--el-box-shadow-light)">
        <div style="font-size: 22px; margin-left: 15px; color: green;margin-bottom: 18px;">
            <BIconDeviceHdd style="position: relative; top: 2px" ></BIconDeviceHdd>磁盘
        </div>
        <div style="width: 100%;margin-left: 12px;">
            <el-form-item label="类型" >
                <el-select style="width: 16%" v-model="disk.iotype">
                    <template v-for="arch in ioTypes">
                        <el-option :label="arch" :value="arch" />
                    </template>
                </el-select>
            </el-form-item>
        </div>

        <div style="margin: 0px 12px;">
            <el-form-item label="磁盘"  >
                <el-input v-model="disk.path" style="width: 90%"/>
                <el-button style="width: 10%">选择</el-button>
            </el-form-item>
        </div>
    </div>
</template>